<template>
  <div>
      <div class="filter-up">
        <span>字段：</span>
      <div class="workflow_filter_field">
        <div class="workflow_filter_select">{{selectData.alia}}</div>
        <button-popover :output="output" @change="handleSelectChange"></button-popover>
      </div>
      <!-- <div class="workflow_input_select" v-if="selectData">{{selectData.alia}}</div> -->
        <a-select v-model="filter.filterType" v-if="filter.dataType === dataType.TEXT || filter.dataType === dataType.TEXT_AREA || filter.dataType === dataType.RADIO || filter.dataType === dataType.SELECT" placeholder="请选择" size="mini" style="width: 100px">
          <a-select-option 
            v-for="item in textOption"
            :key="item.value"
            :value="item.value"
          >
            {{item.label}}
          </a-select-option>
        </a-select>
        <a-select v-model="filter.filterType" v-if="filter.dataType === dataType.NUMBER" placeholder="请选择" size="mini" style="width: 100px">
          <a-select-option 
            v-for="item in numberOption"
            :key="item.value"
            :value="item.value"
          >
            {{item.label}}
          </a-select-option>
        </a-select>
        <a-select v-model="filter.filterType" v-if="filter.dataType === dataType.DATE" placeholder="请选择" size="mini" style="width: 100px">
          <a-select-option 
            v-for="item in dateOption"
            :key="item.value"
            :value="item.value"
          >
            {{item.label}}
          </a-select-option>
        </a-select>
        <!-- <a-select v-model="filter.dateRange" v-if="filter.dataType === dataType.DATE" placeholder="请选择" size="mini" style="width: 100px">
          <a-select-option 
            v-for="item in dateDetailOption"
            :key="item.value"
            :value="item.value"
          >
            {{item.label}}
          </a-select-option>
        </a-select> -->
        <span style="cursor: pointer"
          @click="deleteFilter(filter.uuid)"
        >
          x
        </span>
      </div>
      <div style="width: 100%; padding: 0 10px 0 20px">
        <workflow-input v-model="filter.values[0]" :hideTitle="true" :field="selectField" :output="output" v-if="filter.dataType !== dataType.DATE"></workflow-input>
        <workflow-selected v-model="filter.values[0]" :hideTitle="true" :optionValue="dateDetailOption" :field="selectField" :output="output"  v-else></workflow-selected>
      </div>
  </div>
</template>

<script>
import {DataType, FilterType, DateRange} from '@/filterConstant'
import WorkflowInput from './workflowInput.vue'
import workflowSelected from './workflowSelected.vue'
import ButtonPopover from './buttonPopover.vue'
export default {
    props: {
      output: Object,
      filter: Object
    },
    data(){
      return {
        dataType: DataType,
        dateRange: DateRange,
        selectField: null,
        selectData: {
          alia: ''
        },
        textOption: [
          {
            value: FilterType.INCLUDE,
            label: '包含'
          },
          {
            value: FilterType.EQUAL,
            label: '是'
          },
          {
            value: FilterType.BEGAIN,
            label: '开头为'
          },
          {
            value: FilterType.END,
            label: '结尾为'
          },
          {
            value: FilterType.EXCLUSIVE,
            label: '不包含'
          },
          {
            value: FilterType.UNEQUAL,
            label: '不是'
          }
        ],
        numberOption: [
          {
            value: FilterType.EQUAL,
            label: '='
          },
          {
            value: FilterType.UNEQUAL,
            label: '≠'
          },
          {
            value: FilterType.GREATER,
            label: '>'
          },
          {
            value: FilterType.GREATER_EQUAL,
            label: '>='
          },
          {
            value: FilterType.LESS,
            label: '<'
          },
          {
            value: FilterType.LESS_EQUAL,
            label: '<='
          }
        ],
        dateOption: [
          {
            value: FilterType.DATE_YES,
            label: '日期是'
          },
          {
            value: FilterType.DATE_NO,
            label: '日期不是'
          }
        ],
        dateDetailOption: [
          {
            value: DateRange.TODAY,
            label: '今天'
          },
          {
            value: DateRange.YESTERDAY,
            label: '昨天'
          },
          {
            value: DateRange.TOMORROW,
            label: '明天'
          },
          {
            value: DateRange.THIS_WEEK,
            label: '本周'
          },
          {
            value: DateRange.LAST_WEEK,
            label: '上周'
          },
          {
            value: DateRange.NEXT_WEEK,
            label: '下周'
          },
          {
            value: DateRange.THIS_MONTH,
            label: '本月'
          },
          {
            value: DateRange.LAST_MONTH,
            label: '上月'
          },
          {
            value: DateRange.NEXT_MONTH,
            label: '下月'
          },
          {
            value: DateRange.PAST_SEVERAL_DAYS,
            label: '过去...天'
          },
          {
            value: DateRange.FEATURE_SEVERAL_DAYS,
            label: '将来...天'
          }
        ],
      }
    },
    components:{
      WorkflowInput,
      workflowSelected,
      ButtonPopover,
    },
    mounted(){
      let re = /^{{(\w+(?:\.\w+)+)}}$/
      if(re.test(this.filter.field)){
        let split = re.exec(this.filter.field)[1].split('.')
        for (let i = 0; i < this.output.length; i++) {
          if(this.output[i].nodeId === split[0]){
            this.selectData = this.output[i].outputs.find(c => c.name === split[split.length - 1])
          }
        }
      }
    },
    methods:{
      handleSelectChange(data){
        this.selectData = data
        this.filter.field = `{{${data.parentNodeId}.outputs.${data.parentKey}.${data.name}}}`
        this.selectFieldChange(data)
      },
      deleteFilter(uuid){
        this.$emit('deleteFilter', uuid)
      },
      selectFieldChange(field){
        this.selectField = field
        this.filter.dataType = field.dataType
        switch(field.dataType){
          case DataType.TEXT:
            this.filter.filterType = FilterType.INCLUDE
            break
          case DataType.NUMBER:
            this.filter.filterType = FilterType.EQUAL
            break
          case DataType.DATE:
            this.filter.filterType = FilterType.DATE_YES
            this.filter.dateRange = DateRange.TODAY
            break
        }
      }
    }
}
</script>

<style lang="less">
.filter-up{
    padding: 5px 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .workflow_filter_field{
      width: 200px;
      display: flex;
      height: 35px;
      border: 1px solid #d9d9d9;
      border-radius: 5px;
      justify-content: space-between;
      align-items: center;

      .workflow_filter_select{
        margin: 0 10px;
        padding: 0 10px;
        background-color: rgba(127, 255, 212, 0.6);
      }
    }
}
</style>